<template>
  <div class="yh_content foSi14">
    <div class="tback">
      <el-button v-if="type === 0" type="primary" class="mar-right10 bac6b7" @click="tiyanClick">发放体验卡</el-button>
      <el-button type="primary" class="bac6b7" @click="back">返回列表</el-button>
    </div>
    <el-form ref="form" :model="form" :rules="rules">
      <div class="contents">
        <div class="item-l wid100 dis hei42">
          <div class="wid33 item-p1 dis disAl disJuB item-bor">
            <div>姓名</div>
            <div>{{ memberinfo.realname }}</div>
          </div>
          <div class="wid33 item-p1 dis disAl disJuB item-bor">
            <div>性别</div>
            <div>{{ memberinfo.sex === 1?'男':'女' }}</div>
          </div>
          <div class="wid33 item-p1 dis disAl disJuB item-bor">
            <div>手机</div>
            <div>{{ memberinfo.tel }}</div>
          </div>
        </div>
        <div class="small_title">卡信息</div>
        <div class="forms">
          <div class="forms_item" style="margin-bottom: 0px">
            <div class="left_title"><span style="color:red;margin-right:2px">*</span>卡名称</div>
            <div class="dis disAl">
              <el-select
                v-model="form.product_id"
                style="width: 140px;"
                filterable
                placeholder="选择会员卡"
                size="small"
                @change="cardMembershipChange"
              >
                <el-option
                  v-for="(item,index) in cardMembership_options"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
              <div v-if="Object.keys(cardMembership).length > 0" class="mar-left10 mar-right10">
                {{ cardMembership.sell_price }}元
              </div>
            </div>
          </div>
          <div class="forms_item" style="margin-bottom: 0px">
            <div class="left_title"><span style="color:red;margin-right:2px">*</span>卡号</div>
            <el-form-item class="mp0" prop="card_number">
              <el-input
                v-model="form.card_number"
                style="width: 140px;"
                size="small"
                placeholder="会员卡号"
              />
            </el-form-item>
          </div>
          <div class="forms_item" style="width: 100%;margin-top: 0px">
            <div class="left_title mar-left5 " style="color: #707070;font-size: 12px">
              卡说明:自开卡之日起有效期60天，不限制请假次数及天数:自发卡之日10天内未开卡则自动开卡。</div>
          </div>
          <div class="forms_item" style="width: 100%;margin-top: 0px;padding: 15px 0px 10px 20px">
            <el-checkbox v-model="form.old_cards">补录老卡</el-checkbox>
          </div>
          <div v-show="form.old_cards" class="forms_item">
            <div class="left_title"><span style="color:red;margin-right:2px">*</span>开卡时间</div>
            <div style="display:flex;align-items: center;">
              <el-date-picker
                v-model="form.cards_activate"
                style="width: 140px; margin-left: 5px"
                size="small"
                type="date"
                placeholder="开卡时间"
              />
            </div>
          </div>
          <div v-show="form.old_cards" class="forms_item">
            <div class="left_title"><span style="color:red;margin-right:2px">*</span>有效期至</div>
            <div class="dis disAl">
              <el-form-item class="mp0" prop="cards_period">
                <el-date-picker
                  v-model="form.cards_period"
                  style="width: 140px; margin-left: 5px"
                  size="small"
                  type="date"
                  placeholder="有效期至"
                />
              </el-form-item>
            </div>
          </div>
          <div v-show="form.old_cards" class="forms_item">
            <div class="left_title">发卡时间</div>
            <div class="dis disAl">
              <el-date-picker
                v-model="form.cards_hairpin"
                style="width: 140px; margin-left: 5px"
                size="small"
                type="date"
                placeholder="发卡时间"
              />
            </div>
          </div>
          <div v-show="form.old_cards" class="wid100 disAl forms_item3">
            <div style="width: 15%;">历史请假情况：</div>
            <div class="wid85">
              <div class="dis disAl">
                <div class="dis disAl mar-top5">
                  <div>已经请假</div>
                  <el-form-item class="mp0" prop="cards_leave_num">
                    <el-input
                      v-model="form.cards_leave_num"
                      style="width: 80px;margin: 0px 10px"
                      size="small"
                    />
                  </el-form-item>
                  <div>次，共</div>
                  <el-form-item class="mp0" prop="cards_leave_day">
                    <el-input
                      v-model="form.cards_leave_day"
                      style="width: 80px;margin: 0px 10px"
                      size="small"
                    />
                  </el-form-item>
                  <div>天</div>
                </div>
              </div>
              <div class="foSi12 mar-top10" style="color: #474747">
                说明:历史请假状态可以不填，如果馆里有限制会员卡有效期的请假次数，建议填写。如果会员卡目前请假，建议销假后再录入。</div>
            </div>
          </div>
          <div class="wid100 forms_item3 disAl" style="padding:10px 10px 10px 10px;">
            <div class="left_title" style="width: 160px;"><span
              style="color:red;margin-right:2px"
            >*</span>开卡</div>
            <div class="dis disAl">
              <div class="dis disAl cuPo hei32">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 18px;height: 18px;border: 1px solid #6b7cdd;"
                  @click.stop="form.activate_card = 1"
                >
                  <div
                    v-if="form.activate_card === 1"
                    class="borRad50"
                    style="width: 8px;height: 8px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">立即开卡</div>
              </div>
              <div class="dis disAl cuPo mar-left30 hei32">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 18px;height: 18px;border: 1px solid #6b7cdd;"
                  @click.stop="form.activate_card = 2"
                >
                  <div
                    v-if="form.activate_card === 2"
                    class="borRad50"
                    style="width: 8px;height: 8px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5">第一次预约开卡</div>
              </div>
              <div class="dis disAl cuPo mar-left30 hei32">
                <div
                  class="dis disAl disJuC bacFFF borRad50"
                  style="width: 18px;height: 18px;border: 1px solid #6b7cdd;"
                  @click.stop="form.activate_card = 3"
                >
                  <div
                    v-if="form.activate_card === 3"
                    class="borRad50"
                    style="width: 8px;height: 8px;background: #6b7cdd;"
                  />
                </div>
                <div class="mar-left5 mar-right5">特定时间开卡</div>
                <el-form-item class="mp0" prop="activate_card_time">
                  <el-date-picker
                    v-if="form.activate_card === 3"
                    v-model="form.activate_card_time"
                    style="width: 140px; margin-left: 5px"
                    size="small"
                    type="date"
                    placeholder="请选择日期"
                  />
                </el-form-item>
              </div>
            </div>
          </div>
          <div class="forms_item3 wid100" style="flex-direction: column">
            <div class="dis disAl">
              <div class="left_title mar-right20" style="width: 140px;">推荐办卡人</div>
              <el-autocomplete
                v-model="form.staff_id"
                :fetch-suggestions="remoteMethod1"
                placeholder="姓名/手机号"
                style="width: 200px;"
                @select="staffChange"
              />
            </div>
            <div
              v-if="Object.keys(staff).length > 0"
              class="dis disAl mar-top10"
              style="border: 1px dashed #ccc;padding: 10px;margin-left: 160px;"
            >
              <el-popover
                placement="top-start"
                title="推荐办卡人"
                width="400"
                trigger="click"
                content="可以是员工或者是会员。如果是一个陌生人，直接输入姓名即可。编辑会员卡时可再次编辑。"
              >
                <i slot="reference" class="el-icon-question wenhao mar-right5" />
              </el-popover>
              <div>姓名：{{ staff.name }}</div>
              <div class="mar-left20">性别：{{ staff.sex === 1?'男':'女' }}</div>
              <div class="mar-left20">手机：{{ staff.mobile }}</div>
            </div>
            <div
              v-else
              class="dis disAl mar-top10"
              style="border: 1px dashed #ccc;padding: 10px;margin-left: 160px;"
            >
              <el-popover
                placement="top-start"
                title="推荐办卡人"
                width="400"
                trigger="click"
                content="可以是员工或者是会员。如果是一个陌生人，直接输入姓名即可。编辑会员卡时可再次编辑。"
              >
                <i slot="reference" class="el-icon-question wenhao mar-right5" />
              </el-popover>
              <div class="dis disAl">
                <div>推荐人</div>
                <div class="mar-left10"><el-tag type="warning">陌生人</el-tag></div>
              </div>
              <div v-if="form.staff_id" class="mar-left10">{{ form.staff_id }}</div>
            </div>
          </div>
        </div>
        <div class="small_title">收费信息</div>
        <div class="forms">
          <div class="forms_item disAl" style="margin-bottom: 0px;padding: 15px">
            <div class="left_title">卡售价(元)</div>
            <div>{{ cardMembership.sell_price }}</div>
          </div>
          <div class="forms_item disAl" style="margin-bottom: 0px;padding: 15px">
            <div v-if="cardMembership.card_type !== 1" class="left_title">卡额度({{ cardMembership.card_type===2?'次':'元' }})</div>
            <div v-if="cardMembership.card_type !== 1">{{ cardMembership.card_money }}</div>
          </div>
          <div
            v-if="cardMembership.card_type !== 3 && type === 0"
            class="forms_item mar-top10"
            style="margin-bottom: 0px;"
          >
            <div class="left_title">优惠活动(次)</div>
            <div class="dis disAl">
              <div class="foSi14 mar-right5" style="width: 50px;text-align: right">加赠</div>
              <el-form-item class="mp0" prop="charge_card_activity_num">
                <el-input v-model="form.charge_card_activity_num" size="small" style="width: 85px;" />
              </el-form-item>
            </div>
          </div>
          <div v-if="cardMembership.card_type !== 1" class="forms_item mar-top10" style="margin-bottom: 0px;">
            <div class="left_title"><span style="color:red;margin-right:2px">*</span>实际余额({{ cardMembership.card_type===2?'次':'元' }})</div>
            <div class="dis disAl">
              <el-form-item class="mp0" prop="charge_card_balance">
                <el-input
                  v-model="form.charge_card_balance"
                  style="width: 140px;"
                  size="small"
                  placeholder="请输入余额"
                />
              </el-form-item>
            </div>
          </div>
          <div
            v-if="type === 1 && cardMembership.card_type !== 1"
            class="forms_item mar-top10"
            style="margin-bottom: 0px;"
          >
            <div class="left_title">优惠活动({{ cardMembership.card_type===2?'次':'元' }})</div>
            <div class="dis disAl">
              <div class="foSi14 mar-right5" style="width: 50px;text-align: right">加赠</div>
              <el-form-item class="mp0" prop="charge_card_activity_num">
                <el-input v-model="form.charge_card_activity_num" size="small" style="width: 85px;" />
              </el-form-item>
            </div>
          </div>
          <div class="forms_item mar-top10" style="margin-bottom: 0px;">
            <div class="left_title">赠送积分数(分)</div>
            <el-form-item class="mp0" prop="charge_card_give_integral">
              <el-input
                v-model="form.charge_card_give_integral"
                style="width: 140px;"
                size="small"
                placeholder="请输入积分"
              />
            </el-form-item>
          </div>
          <div class="forms_item mar-top10" style="margin-bottom: 0px;">
            <div class="left_title">付款方式</div>
            <el-form-item class="mp0" prop="charge_card_paytype">
              <el-select
                v-model="form.charge_card_paytype"
                style="width: 140px;"
                placeholder="请选择"
                size="small"
                @change="paytypeChange"
              >
                <el-option
                  v-for="item in paytypelist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="forms_item mar-top10" style="margin-bottom: 0px;">
            <div class="left_title">请客卡</div>
            <div class="dis disAl">
              <el-select
                v-model="form.charge_card_coupon"
                style="width: 140px;"
                placeholder="请选择"
                size="small"
                @change="coupon"
              >
                <el-option
                  v-for="item in couponlist"
                  :key="item.id"
                  :label="item.couponname"
                  :value="item.id"
                />
              </el-select>
            </div>
          </div>
          <div
            v-if="cardMembership.card_type !== 1"
            class="forms_item mar-top10"
            style="margin-bottom: 0px;"
          />
          <div class="forms_item mar-top10" style="margin-bottom: 0px;">
            <div class="left_title"><span style="color:red;margin-right:2px">*</span>实收金额(元)</div>
            <el-form-item class="mp0" prop="charge_card_receipts_money">
              <el-input
                v-model="form.charge_card_receipts_money"
                style="width: 140px;"
                size="small"
                placeholder="请输入金额"
              />
            </el-form-item>
          </div>
          <div v-if="type !== 1 || cardMembership.card_type !== 1" class="forms_item mar-top10" style="margin-bottom: 0px;" />
          <div v-if="form.charge_card_coupon === 4" class="forms_item mar-top10" style="margin-bottom: 0px;">
            <div class="left_title"><span style="color:red;margin-right:2px">*</span>储值卡支付金额（元）</div>
            <div class="dis disAl">
              <el-input
                v-model="form.charge_card_stored_money"
                style="width: 140px;"
                size="small"
                placeholder="请输入金额"
              />
            </div>
          </div>
          <div v-if="form.charge_card_coupon === 4" class="forms_item mar-top10" style="margin-bottom: 0px;">
            <div class="left_title"><span style="color:red;margin-right:2px">*</span>储值卡选择</div>
            <el-form-item class="mp0" prop="charge_card_stored_id">
              <el-select
                v-model="form.charge_card_stored_money"
                style="width: 140px;"
                placeholder="姓名/手机号/卡号"
                size="small"
              >
                <el-option
                  v-for="(item,index) in cardStoredsList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="wid100 forms_item3 disAl disJuB mar-top10" style="padding:10px 10px 10px 10px;">
            <div class="left_title">备注</div>
            <div><el-input
              v-model="form.notes"
              type="textarea"
              style="min-width:720px;"
              maxlength="100000"
              :rows="5"
              placeholder="请输入备注"
            /> </div>
          </div>
        </div>
        <div class="buttom_btns">
          <div class="save">
            <el-button type="primary" class="bac6b7" @click.stop="submitForm('form')">保存</el-button>
          </div>
          <div class="nosave">
            <el-button type="info" @click="back">取消</el-button>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import {
  getXuan
} from '@/utils/limits.js'
import {
  mapGetters
} from 'vuex' // Secondary package based on el-pagination
import {
  cardSearch,
  cardSearch1,
  searchLists,
  cardStoredList,
  memberHairpin,
  couponStoredList
} from '@/api/member'
export default {
  name: 'MemberAddCard',
  components: {},
  data() {
    const cardsActivate = (rule, value, callback) => {
      if (this.form.old_cards && !value) {
        callback(new Error('请输入1~100内正整数'))
      } else {
        callback()
      }
    }
    const cardsLeave = (rule, value, callback) => {
      if (this.form.old_cards) {
        if (!parseFloat(value) || value < 0) {
          callback(new Error('请输入正整数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const cardActivate = (rule, value, callback) => {
      if (this.form.activate_card === 3 && !this.form.activate_card_time) {
        callback(new Error('请选择日期'))
      } else {
        callback()
      }
    }
    const cardActivity = (rule, value, callback) => {
      if (Number(value) === 0) {
        callback()
      } else if (!parseFloat(value) || value % 1 !== 0 || value < 0) {
        callback(new Error('请输入整数'))
      } else {
        callback()
      }
    }
    const cardBalance = (rule, value, callback) => {
      var len = 0
      if (value) {
        var tem = value.toString().split('.')
        len = tem.length >= 2 ? tem[1].length : 0
      }
      if (Number(value) === 0 || this.cardMembership.card_type === 1) {
        callback()
      } else if (!parseFloat(value) || value % 1 !== 0 || value < 0 || len > 1) {
        callback(new Error('请输入余额（支持一位小数）'))
      } else {
        callback()
      }
    }
    const cardIntegral = (rule, value, callback) => {
      if (!value) {
        callback()
      } else if (!parseFloat(value) || value % 1 !== 0 || value < 0 || value > 10000000) {
        callback(new Error('请输入1-10000000之间的正整数或留空'))
      } else {
        callback()
      }
    }
    const cardPaytype = (rule, value, callback) => {
      if (value === 0) {
        callback(new Error('请选择付款方式'))
      } else {
        callback()
      }
    }
    const cardReceipts = (rule, value, callback) => {
      var len = 0
      if (value) {
        var tem = value.toString().split('.')
        len = tem.length >= 2 ? tem[1].length : 0
      }
      if (Number(value) === 0) {
        callback()
      } else if (!parseFloat(value) || value < 0 || len > 2) {
        callback(new Error('请输入金额'))
      } else {
        callback()
      }
    }

    return {
      list: null,
      total: 0,
      listLoading: false,
      search: {
        membership: []
      },
      form: {
        notes: '',
        gender: 1,
        city: '',
        card_number: '',
        old_cards: false, // 是否开启补录老卡
        cards_activate: '', // 补录老卡->开卡时间
        cards_period: '', // 补录老卡->截至时间
        cards_hairpin: '', // 补录老卡->发卡时间
        cards_leave_num: null,
        cards_leave_day: null,
        activate_card: 1,
        activate_card_time: null,
        staff_id: null,
        charge_card_balance: null,
        charge_card_give_integral: null,
        charge_card_paytype: 0, // 支付方式
        charge_card_coupon: null, // 优惠券ID
        charge_card_receipts_money: null,
        charge_card_stored_id: null,
        charge_card_stored_money: null,
        a: '',
        member_id: null, // 搜索会员选择的id
        product_id: null, // 搜索会员卡选择的id
        charge_card_activity_num: null
      },
      rules: {
        charge_card_receipts_money: [{
          required: true,
          trigger: 'change',
          validator: cardReceipts
        }],
        charge_card_paytype: [{
          required: true,
          trigger: 'change',
          validator: cardPaytype
        }],
        charge_card_give_integral: [{
          required: true,
          trigger: 'change',
          validator: cardIntegral
        }],
        charge_card_balance: [{
          required: true,
          trigger: 'change',
          validator: cardBalance
        }],
        charge_card_activity_num: [{
          required: true,
          trigger: 'change',
          validator: cardActivity
        }],
        activate_card_time: [{
          required: true,
          trigger: 'change',
          validator: cardActivate
        }],
        member_id: [{
          required: true,
          message: '请选择会员或访客',
          trigger: 'change'
        }],
        card_number: [{
          required: true,
          message: '请输入1~16位卡号',
          trigger: 'blur'
        }],
        cards_period: [{
          required: true,
          trigger: 'change',
          validator: cardsActivate
        }],
        cards_leave_num: [{
          required: true,
          trigger: 'change',
          validator: cardsLeave
        }],
        cards_leave_day: [{
          required: true,
          trigger: 'change',
          validator: cardsLeave
        }]
      },
      listQuery: {
        page: 1,
        limit: 20
      },
      paytypelist: [ // 支付方式
        {
          label: '请选择',
          value: 0
        }, {
          label: '商户扫码(微信/支付宝/云闪付)',
          value: 1
        }, {
          label: '用户扫码(收付款)',
          value: 2
        }, {
          label: '现金支付',
          value: 3
        }, {
          label: '储值卡支付',
          value: 4
        }, {
          label: '线下支付(银行卡)',
          value: 5
        }, {
          label: '线下支付(微信)',
          value: 6
        }, {
          label: '线下支付(支付宝)',
          value: 7
        }, {
          label: '线下支付(其他)',
          value: 8
        }
      ],
      couponlist: [],
      // 防止重复提交
      loading: false,
      memberinfo: {}, // 所选会员
      staff: {},
      searchmember_options: [], // 搜索会员列表
      cardMembership_options: [], // 会员卡列表
      cardMembership: {}, // 所选会员卡
      staff_options: [], // 推荐办卡人列表
      cardStoredsList: [], // 储值卡列表
      type: 0
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'roles'
    ])
  },
  created() {
    var query = this.$route.query
    this.type = Number(query.type)
    this.memberinfo = JSON.parse(query.item)
    this.form.member_id = this.memberinfo.id
    var xuanList = [{
      name: this.type === 0 ? '发卡' : '发体验卡',
      url: '/member/memberaddnewcard?type=' + this.type + '&item=' + query.item,
      pd: true
    }]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 0
    })
    this.getSousuo()
    this.getMeberId()
  },
  methods: {
    tiyanClick() {
      this.type = 1
      this.getSousuo()
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var data = {
            is_experience: this.cardMembership.is_experience,
            product_id: this.form.product_id,
            member_id: this.form.member_id,
            card_number: this.form.card_number,
            old_cards: this.form.old_cards ? 1 : 0,
            cards_activate: this.form.cards_activate,
            cards_period: this.form.cards_period,
            cards_hairpin: this.form.cards_hairpin,
            cards_leave_num: this.form.cards_leave_num,
            cards_leave_day: this.form.cards_leave_day,
            activate_card: this.form.activate_card,
            activate_card_time: this.form.activate_card_time,
            staff_id: this.staff ? this.staff.id : 0,
            staff_name: this.form.staff_id,
            charge_card_sell_price: this.cardMembership.sell_price,
            charge_card_limit: this.cardMembership.card_money,
            charge_card_activity_num: this.form.charge_card_activity_num,
            charge_card_balance: this.form.charge_card_balance,
            charge_card_give_integral: this.form.charge_card_give_integral,
            charge_card_paytype: this.form.charge_card_paytype,
            charge_card_coupon: this.form.charge_card_coupon,
            charge_card_receipts_money: this.form.charge_card_receipts_money,
            charge_card_stored_id: this.form.charge_card_stored_id,
            charge_card_stored_money: this.form.charge_card_stored_money,
            notes: this.form.notes
          }
          memberHairpin(data).then(response => {
            this.back()
          }).catch(error => {
            console.log(error)
          })
        } else {
          this.$message.error('请按规则填写完整信息')
          return false
        }
      })
    },
    getMeberId() {
      // 创建一个 Date 对象
      var today = new Date()
      // 获取年、月、日、时、分、秒
      var year = today.getFullYear()
      var month = today.getMonth() + 1 // 月份是从 0 开始计数的，需要加1
      var day = today.getDate()
      var hours = today.getHours()
      var minutes = today.getMinutes()
      var seconds = today.getSeconds()
      this.form.card_number = year + (month < 10 ? '0' : '') + month + (day < 10 ? '0' : '') + day +
					(hours < 10 ? '0' : '') + hours + (minutes < 10 ? '0' : '') + minutes
      this.form.cards_activate = year + '-' + (month < 10 ? '0' : '') + month + '-' + (day < 10 ? '0' : '') + day
    },

    remoteMethod3() {
      cardStoredList({
        id: this.form.member_id
      }).then(response => {
        const {
          data
        } = response
        this.cardStoredsList = data
      })
    },
    getSousuo() {
      searchLists({
        name: '',
        card_is_experience: this.type
      }).then(response => {
        const {
          data
        } = response
        this.cardMembership_options = data
        if (data.length > 0) {
          this.form.product_id = this.cardMembership_options[0].id
          this.cardMembership = this.cardMembership_options[0]
          this.form.charge_card_receipts_money = this.cardMembership_options[0].sell_price
          this.form.charge_card_balance = this.cardMembership_options[0].card_money
          if (this.cardMembership.card_give_integral_type === 2) {
            this.form.charge_card_give_integral = this.cardMembership_options[0]
              .card_give_integral_num
          }
        }
      })
    },
    paytypeChange(e) {
      if (this.form.charge_card_paytype === 4) {
        this.form.charge_card_stored_money = this.cardMembership.sell_price
        this.form.charge_card_receipts_money = 0
      } else if (this.form.charge_card_stored_money) {
        this.form.charge_card_receipts_money = this.cardMembership.sell_price
        this.form.charge_card_stored_money = null
        this.form.charge_card_stored_id = null
      }
    },
    searchmemberChange(e) {
      this.searchmember_options.forEach(item => {
        if (e === item.id) {
          this.memberinfo = item
          this.remoteMethod3()
          return
        }
      })
    },
    cardMembershipChange(e) {
      this.cardMembership_options.forEach(item => {
        if (e === item.id) {
          this.cardMembership = item
          this.form.charge_card_receipts_money = item.sell_price
          this.form.charge_card_balance = item.card_money
          if (this.cardMembership.card_give_integral_type === 2) {
            this.form.charge_card_give_integral = item.card_give_integral_num
          }
          this.getCoupon()
          return
        }
      })
    },
    coupon(e) {
      console.log('选中城市id:', e)
      // console.log("选中城市id:", this.form.charge_card_coupon);
      this.couponlist.forEach(item => {
        if (e === item.id) {
          console.log(item)
          if (this.form.charge_card_receipts_money - item.money < 0) {
            this.form.charge_card_receipts_money = 0
          } else {
            this.form.charge_card_receipts_money = this.form.charge_card_receipts_money - item.money
          }
          return
        }
      })
    },
    getCoupon() {
      couponStoredList({
        id: this.form.member_id,
        card_id: this.cardMembership.id,
        card_money: this.form.charge_card_receipts_money
      }).then(response => {
        const {
          data
        } = response
        this.couponlist = data
      })
    },
    staffChange(e) {
      console.log(e)
      this.form.staff_id = e.item.name
      this.staff = e.item
    },
    remoteMethod1(queryString, cb) {
      console.log(queryString)
      cardSearch1({
        keyword: queryString
      }).then(response => {
        const {
          data
        } = response
        this.staff_options = data.map((terminal) => {
          return {
            value: terminal.name + ' / ' + (terminal.sex === 1 ? '男' : '女') + ' / ' +
								terminal.mobile,
            item: terminal
          }
        })
        cb(this.staff_options)
      })
    },
    back() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
	.yh_content {
		padding: 20px;
	}

	.contents {
		width: 860px;
		margin: 0px auto;
		padding: 10px
	}

	.yh_topsearch {
		border: 1px solid #ccc;
		padding: 20rpx;

	}

	.yh_dis {
		display: flex;
	}

	.yh_disAlc {
		align-items: center;
	}

	.touxiang {
		width: 70px;
		height: 70px;
		border-radius: 10px;
	}

	.thead {
		display: flex;
		align-items: center;
	}

	.small_title {
		font-size: 13px;
		color: #7c7c7c;
		margin-top: 20px;
		margin-bottom: 10px;
	}

	.forms {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.forms_item {
		width: 49.9%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #ededed;
		padding: 5px 5px 5px 10px;
		margin-bottom: 10px
	}

	.forms_item3 {
		display: flex;
		background: #ededed;
		padding: 5px 5px 5px 10px;
		margin-bottom: 10px
	}

	.left_title {
		letter-spacing: 2px;
		font-size: 14px
	}

	.buttom_btns {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50%;
		margin: 0px auto;
		margin-top: 50px;
		margin-bottom: 50px
	}

	.save {
		margin-right: 30px
	}

	.tback {
		display: flex;
		justify-content: right;
		width: 90%;
		margin: 0px auto;
	}

	::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #6b7cdd;
		border-color: #6b7cdd;
	}

	::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
		background-color: #ffffff;
		border-color: #DCDFE6;
	}

	::v-deep .el-checkbox__inner:hover {
		border-color: #DCDFE6;
	}

	::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
		border-color: #DCDFE6;
	}

	::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
		color: #606266;
	}

	::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
		border-color: #fdfeff;
	}
</style>
